/**
 * @Author:marina
 * @Date: 2025-02-20 13:56:55 
 * @Description: 蜂窝图片，悬浮放大组件
 */
<template>
    <div class="cellular-pic">
        <div class="gallery ">
            <div
                class="avatar"
                :style="`--img:url(${_data[0]?.url || ''})`"
                :title="`${_data[0]?.title || ''}`"
                @click="handleClick(0)"
            ></div>
            <div
                class="avatar"
                :style="`--img:url(${_data[1]?.url || ''})`"
                :title="`${_data[1]?.title || ''}`"
                @click="handleClick(1)"
            ></div>
            <div
                class="avatar"
                :style="`--img:url(${_data[2]?.url || ''})`"
                :title="`${_data[2]?.title || ''}`"
                @click="handleClick(2)"
            ></div>
            <div
                class="avatar"
                :style="`--img:url(${_data[3]?.url || ''})`"
                :title="`${_data[3]?.title || ''}`"
                @click="handleClick(3)"
            ></div>
            <div
                class="avatar"
                :style="`--img:url(${_data[4]?.url || ''})`"
                :title="`${_data[4]?.title || ''}`"
                @click="handleClick(4)"
            ></div>
            <div
                class="avatar"
                :style="`--img:url(${_data[5]?.url || ''})`"
                :title="`${_data[5]?.title || ''}`"
                @click="handleClick(5)"
            ></div>
            <div
                class="avatar"
                :style="`--img:url(${_data[6]?.url || ''})`"
                :title="`${_data[6]?.title || ''}`"
                @click="handleClick(6)"
            ></div>
            <div
                class="avatar"
                :style="`--img:url(${_data[7]?.url || ''})`"
                :title="`${_data[7]?.title || ''}`"
                @click="handleClick(7)"
            ></div>
            <div
                class="avatar"
                :style="`--img:url(${_data[8]?.url || ''})`"
                :title="`${_data[8]?.title || ''}`"
                @click="handleClick(8)"
            ></div>
            <div
                class="avatar"
                :style="`--img:url(${_data[9]?.url || ''})`"
                :title="`${_data[9]?.title || ''}`"
                @click="handleClick(9)"
            ></div>
            <div
                class="avatar"
                :style="`--img:url(${_data[10]?.url || ''})`"
                :title="`${_data[10]?.title || ''}`"
                @click="handleClick(10)"
            ></div>
            <div
                class="avatar"
                :style="`--img:url(${_data[11]?.url || ''})`"
                :title="`${_data[11]?.title || ''}`"
                @click="handleClick(11)"
            ></div>
            <div
                class="avatar"
                :style="`--img:url(${_data[12]?.url || ''})`"
                :title="`${_data[12]?.title || ''}`"
                @click="handleClick(12)"
            ></div>
            <div
                class="avatar"
                :style="`--img:url(${_data[13]?.url || ''})`"
                :title="`${_data[13]?.title || ''}`"
                @click="handleClick(13)"
            ></div>
        </div>
    </div>
</template>

<script setup lang="ts">

interface DataItem {
    url: string;    //图片地址
    title: string;  //图片标题
}

const props = defineProps<{
    _data: DataItem[];
}>();

const handleClick = (index: number) => {
    console.log('点击了第', index + 1, '张图片');
}



</script>

<style scoped lang="less">
.cellular-pic {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background-color: #fff;
    display: grid;
    place-content: center;
    min-height: 100vh;
    font-family: system-ui, sans-serif;

    .gallery {
        --_width: 50px;
        --_border-width: 3px;
        --_border-width-hover: 6px;
        --_border-clr: rgba(32, 142, 206, 0.7);
        --_h2-bg-clr: rgba(32, 142, 206, 0.9);
        --_h2-txt-clr: white;
        --_transition-speed: 300ms;
        --_clip: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

        width: fit-content;
        max-width: 4xl;
        display: grid;
        grid-template-columns: repeat(10, var(--_width));
        gap: .75em;
    }

    .avatar {
        background-color: var(--_border-clr);
        display: block;
        grid-column: span 4 / span 4;
        grid-row: span 4 / span 4;
        width: calc(var(--_width) * 3);
        height: calc(var(--_width) * 3);
        position: relative;
        overflow: hidden;
        isolation: isolate;
        clip-path: var(--_clip);
        transition: clip-path ease-in-out var(--_transition-speed) var(--_transition-speed),
        opacity ease-in-out var(--_transition-speed),
        scale ease-in-out var(--_transition-speed);
    }


    .avatar::before {
        content: '';
        position: absolute;
        inset: var(--_border-width);
        clip-path: var(--_clip);
        background-image: var(--img);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        transition: var(--_transition-speed) ease-in-out;

    }

    .avatar::after {
        content: attr(title);
        position: absolute;
        width: 100%;
        padding: .25rem 0;
        text-align: center;
        inset: 85% 0 0 0;
        background: var(--_h2-bg-clr);
        color: var(--_h2-txt-clr);
        font-size: 0.6rem;
        transition: all var(--_transition-speed) ease-in-out;
        opacity: 0;
        translate: 0 100%;
        z-index: 3;
    }

    .avatar:has(~ .avatar:hover),
    .avatar:hover~.avatar {
        opacity: 75%;
        scale: 75%;
    }

    .avatar:hover {
        z-index: 100;
        scale: 150%;
    }

    .avatar:hover::before {
        inset: var(--_border-width-hover);
    }

    .avatar:hover::after {
        opacity: 1;
        translate: 0;
        transition-delay: calc(var(--_transition-speed) * 0.5);
    }

    .avatar:not(:hover) {
        animation: KPzIndexHack 500ms;
    }

    .avatar:nth-child(1) {
        grid-row-start: 1;
        grid-column-start: 5;
    }

    .avatar:nth-child(2) {
        grid-row-start: 3;
        grid-column-start: 3;
    }

    .avatar:nth-child(3) {
        grid-row-start: 3;
        grid-column-start: 7;
    }

    .avatar:nth-child(4) {
        grid-row-start: 5;
        grid-column-start: 1;
    }

    .avatar:nth-child(5) {
        grid-row-start: 5;
        grid-column-start: 5;
    }

    .avatar:nth-child(6) {
        grid-row-start: 5;
        grid-column-start: 9;
    }

    .avatar:nth-child(7) {
        grid-row-start: 7;
        grid-column-start: 3;
    }

    .avatar:nth-child(8) {
        grid-row-start: 7;
        grid-column-start: 7;
    }

    .avatar:nth-child(9) {
        grid-row-start: 9;
        grid-column-start: 1;
    }

    .avatar:nth-child(10) {
        grid-row-start: 9;
        grid-column-start: 5;
    }

    .avatar:nth-child(11) {
        grid-row-start: 9;
        grid-column-start: 9;
    }

    .avatar:nth-child(12) {
        grid-row-start: 11;
        grid-column-start: 3;
    }

    .avatar:nth-child(13) {
        grid-row-start: 11;
        grid-column-start: 7;
    }

    .avatar:nth-child(14) {
        grid-row-start: 13;
        grid-column-start: 5;
    }

    /* Kevin Powel z-index hack */
    @keyframes KPzIndexHack {
        100% {
            z-index: 10;
        }
    }
}
</style>